<template>
  <div class="container">
    <div class="page-top "></div>
    <view class="gybody">
      <view class="lyfk user-update">
        <ul class="hzly">
          <li>
            <span class="bs">*宠物姓名</span>
            <input placeholder="请输入宠物姓名" v-model="petData.pet_name" class="input">
          </li>
          <li>
            <span class="bs">*类别</span>
            <view v-if="isActive===1">
              <p class="p_left p action" @click="action">犬科</p>
              <p class="right p_right p" @click="action">猫科</p>
            </view>
            <view v-if="isActive===2">
              <p class="p_left p" @click="action">犬科</p>
              <p class="right p_right p action" @click="action">猫科</p>
            </view>
            <div style="clear:both"></div>
          </li>
          <li>
            <span class="bs">*宠物图片</span>
            <van-uploader :file-list="fileList" @before-read="upload" use-before-read @after-read="upload"/>
          </li>
          <li>
            <span class="bs">*宠物图片</span>
            <van-uploader :file-list="fileList" @before-read="upload" use-before-read @after-read="upload"/>
          </li>
          <li>
            <span class="bs">*体重（KG/千克）</span>
            <input placeholder="请输入宠物体重" v-model="petData.weight" class="input">
            <span class="js">*最大20KG,请务必按照实际情况填写</span>
          </li>
          <li>
            <span class="bs">*年龄</span>
            <input placeholder="请输入宠物年龄" v-model="petData.age" class="input">
          </li>
<!--          <li>-->
<!--            <span class="bs">备注</span>-->
<!--            <van-field placeholder="请输入备注" ></van-field>-->
<!--          </li>-->
        </ul>
        <view class="lyfk-tj"><vat-button @click="submitData">立即添加</vat-button></view>
      </view>
    </view>

  </div>
</template>

<script>


import {addPet, getPet, updatePet} from "../../../../requests/user/pet";
import {doResponse} from "../../../../requests/tools";

let $this
export default {

  data() {
    // 这里存放数据
    return {
      petData: {
        pet_name: "",
        type_name: "犬科",
        sex: "",
        weight: "",
        age: "",
        img: "",
        is_health: "0"
      },
      fileList: [],
      isActive: 1
    }
  },
  // 方法集合
  methods: {
    submitData() {
      let rawData = $this.petData
      if (rawData.id) {
        updatePet(rawData.id , rawData).then(res => {
          doResponse(res)
        })
      }else {
        addPet(rawData).then(res => {
          doResponse(res)
        })
      }
    },
    action(e) {
      console.log(e.mp._relatedInfo.anchorTargetText)
      if (e.mp._relatedInfo.anchorTargetText === '犬科') {
        $this.petData.type_name = '犬科'
        $this.isActive = 1
      }else {
        $this.petData.type_name = '猫科'
        $this.isActive = 2
      }
    },
    /**
     * 获取宠物详情
     * @param id
     */
    onGetPet(id) {
      getPet(id).then(res => {
        $this.petData.pet_name = res.data.pet_name;
        $this.petData.type_name = res.data.type_name;
        $this.petData.sex = res.data.sex;
        $this.petData.weight = res.data.weight;
        $this.petData.age = res.data.age;
        $this.petData.img = res.data.img;
        $this.petData.is_health = res.data.is_health;
      })
    }



  },
  created() {
    $this = this
  },
  onLoad(options) {
    if (options.id){
      this.onGetPet(options.id)
    }
  }
}
</script>

<style>
.action {
  background-color: #6c77ad;
  color: white;
}

@import "index.css";
</style>
